<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style/index.css">
  <title>LveRectangleJs矩形绘制类</title>
</head>
<body>
  <div class="root">
    <h1>LveRectangleJs v1.2.2</h1>
    <div class="container">
      <div class="editor">
        <div class="editor-item">
          <h2>script</h2>
          <textarea id="editor-js" >
          </textarea>
        </div>
        <div class="editor-item">
          <h2>html</h2>
          <textarea id="editor-html">
            <div class="control">
              图片操作：
              <button id="insert-image">插入图片（智能缩放）</button>
              <button id="upload-image">上传图片（智能缩放）</button>
            </div>
            <div class="control">
              截图操作：
              <button id="startClip">开始截图</button>
              <div>
                <input type="radio" id="color-1" name="color-choose" value="#fa9120">
                <label for="color-1">黄框</label>
                <input type="radio" id="color-2" name="color-choose" value="#02A7F0">
                <label for="color-2">蓝框</label>
              </div>
              <button id="getClip">获取截图</button>
              <button id="closeClip">关闭截图</button>
            </div>
            <div id="rectangle-container" class="rectangle-container"></div>
          </textarea>
        </div>
      </div>
      <div class="preview">
        <div class="control">
          图片操作：
          <button id="insert-image">插入图片（智能缩放）</button>
          <button id="upload-image">上传图片（智能缩放）</button>
        </div>
        <div class="control">
          截图操作：
          <button id="startClip">开始截图</button>
          <div>
            <input type="radio" id="color-1" name="color-choose" value="#fa9120">
            <label for="color-1">黄框</label>
            <input type="radio" id="color-2" name="color-choose" value="#02A7F0">
            <label for="color-2">蓝框</label>
          </div>
          <button id="getClip">获取截图</button>
          <button id="closeClip">关闭截图</button>
        </div>
        <div id="rectangle-container" class="rectangle-container"></div>
        <article>
          <p>矩形框快捷键(events.clip.disabled需设置为false)</p>
          <p>开始截图：alt + w</p>
          <p>保存截图：ctrl + s</p>
          <p>关闭截图：ctrl + q</p>
          <p>矩形框向左移动：键盘向左方向键操作</p>
          <p>矩形框向上移动：键盘向上方向键操作</p>
          <p>矩形框向右移动：键盘向右方向键操作</p>
          <p>矩形框向下移动：键盘向下方向键操作</p>
        </article>
      </div>
    </div>
  </div>
</body>
<script type="module" src="./script/index.js"></script>
</html>